<template>
  <a-card :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <standard-table
      rowKey="partsId"
      :loading='loading'
      :columns="columns"
      :dataSource="dataSource"
      style="margin-top:20px"
    >
      
      <div slot="action" slot-scope="{record}">
        <a-popconfirm style="margin-right: 8px" title="确定报废？" ok-text="报废" cancel-text="取消" @confirm='baofei(record)'>
          <a>
            <a-icon type="minus-circle"/>报废
          </a>
        </a-popconfirm>
      </div>
    </standard-table>
  </a-card>
</template>

<script>
import {addComputer,editComputer,scrapParts} from '@/api/modules/list'
import StandardTable from '@/components/table/StandardTable'

const columns = [
  {
    title: '配件ID',
    dataIndex: 'partsId'
  },
  {
    title: '电脑ID',
    dataIndex: 'computerId'
  },
  {
    title: '字段名',
    dataIndex: 'ziduan',
  },
  {
    title: '配件名',
    dataIndex: 'title',
  },
  {
    title: '操作',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'accountDetail',
  components: {StandardTable},
  i18n: require('./i18n'),
  props:{
    mod:{
      type:String,
    },
    id:{
      type:[String,Number]
    },
    typeList:{
      type:[Object,Array],
      default:()=>{}
    }
  },
  data () {
    return {
      columns,
      dataSource: [],

      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      loading:false,
      form:{
        type:1,
        name:'',
        cpu:'',
        zhuban:'',
        neicun:'',
        xianka:'',
        yingpan:'',
        xianshiqi:'',
        shubiao:'',
        jianpan:'',
        ssd:'',
        qita:'',
        remark:'',
      },
      copy_form:{},
      screenWidth: document.body.clientWidth, // 屏幕宽度
      rules:{
        name:[
          {required: true,message: '请填写用户名', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    if(this.id != 0){
      this.getDetail()
    }
  },
  mounted() {
    this.changeLayout(document.body.clientWidth)
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    getType(id){
      switch(id){
        case 1:case '1':
          return 'cpu'
        case 2:case '2':
          return 'zhuban'
        case 3:case '3':
          return 'neicun'
        case 4:case '4':
          return 'xianka'
        case 5:case '5':
          return 'yingpan'
        case 6:case '6':
          return 'xianshiqi'
        case 7:case '7':
          return 'shubiao'
        case 8:case '8':
          return 'jianpan'
        case 9:case '9':
          return 'ssd'
        case 10:case '10':
          return 'qita'
      }
    },
    getTypeName(id){
      switch(id){
        case 1:case '1':
          return 'cpuname'
        case 2:case '2':
          return 'zhubanname'
        case 3:case '3':
          return 'neicunname'
        case 4:case '4':
          return 'xiankaname'
        case 5:case '5':
          return 'yingpanname'
        case 6:case '6':
          return 'xianshiqiname'
        case 7:case '7':
          return 'shubiaoname'
        case 8:case '8':
          return 'jianpanname'
        case 9:case '9':
          return 'ssd'
        case 10:case '10':
          return 'qitaname'
        default:
          return ''
      }
    },
    getDetail(){
      this.loading = true;
      editComputer({id:this.id}).then((res) => {
        this.loading = false;
        this.form = res.data
        this.copy_form = JSON.parse(JSON.stringify(res.data)) 
        let dataSource = []
        for(let item in res.data){
          if(res.data[item]>0&&this.isPeijian(item)){
            let o = {
              ziduan:item,
              title:res.data[item+'name'],
              partsId:res.data[item],
              computerId:this.id
            }
            dataSource.push(o)
          }
        }
        this.dataSource = dataSource
      }).catch(() => {
        this.loading = false;
      });
    },
    baofei(params){
      this.loading = true;
      scrapParts(params).then(() => {
        this.$message.success('报废成功')
        this.getDetail()
      }).catch(() => {
        this.$message.success('报废失败')
        this.loading = false;
      });
    },
    isPeijian(e){
      let arr = ['cpu','jianpan','neicun','qita','shubiao','ssd','xianka','xianshiqi','yingpan','zhuban'];
      return arr.indexOf(e) >= 0;
    },
    onSubmit(){
      if(this.id != 0){
        this.form.id = this.id
      }
      console.log(this.form)
      this.loading = true;
      if(this.id == 0){
        addComputer(this.form).then(() => {
          this.loading = false;
          this.$message.success('新增成功')
          this.back()
        }).catch(()=>{
          this.$message.error('新增失败')
          this.loading = false;
        });
      }else{
        editComputer(this.form).then(() => {
          this.loading = false;
          this.$message.success('修改成功')
          this.back()
        }).catch(() => {
          this.$message.error('修改失败')
          this.loading = false;
        });
      }
    },
    back(){
      this.$emit('update:mod','normal')
    },
    changeLayout(e){
      if(e<=750){
        this.layout = 'vertical'
        this.labelCol = {}
        this.wrapperCol = {}
        this.btn_wrapperCol = {}
      }else{
        this.layout = 'horizontal'
        this.labelCol = {span: 7}
        this.wrapperCol = {span: 13}
        this.btn_wrapperCol = { span: 13, offset: 7 }
      }
    },
  },
  watch:{
    screenWidth(e){
      this.changeLayout(e)
    },
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    },
    formItemLayout() {
      const layout  = this.layout;
      return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
  }
}
</script>

<style scoped>

</style>
